<template>
  <header>
    <!--  左边内容    -->
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini" @click="handleMenu()"></el-button>
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/' }" style="color: white">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">{{ current.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--   右边内容   -->
    <div class="r-content">
      <!--  下拉框，点击触发    -->
      <el-dropdown trigger="click" size="mini">
            <span class="el-dropdown-link">
                  <img :src="userImg" style="height: 30px;width: 30px;border-radius: 50%" class="person" alt="图片走丢了"/>
            </span>
        <!--    下拉菜单    -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>

      </el-dropdown>
    </div>
  </header>
</template>

<script>
import {mapState} from "vuex"

export default {
  name: "CommonHeader",
  data() {
    return {
      userImg: require("../assets/images/user.jpg"),
    }
  },
  methods: {
    handleMenu() {
      this.$store.commit("collapseMenu")
    }
  },
  computed: {
    ...mapState({
      current: (state) => state.table.currentMenu
    })

  }
}
</script>

<style lang="scss" scoped>
header {
  display: flex; //弹性布局
  height: 100%;
  align-items: center; //垂直居中，用于display: flex;
  justify-content: space-between; //两端对其，用于display: flex;
}

.l-content {
  display: flex; //弹性布局
  align-items: center; //垂直居中
  .el-button {
    margin-right: 20px;
  }
}

h3 {
  color: aliceblue;
}


</style>

<style lang="scss">

.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: #ffffff;
    font-weight: normal;
  }

  &:last-child {
    .el-breadcrumb__inner {
      color: white;
    }
  }
}
</style>
